<template>
  <d2-container>
  <section class="vue-monitor" :style="'height:'+containerHeight+'px'">
    <el-row>
      <el-col :span="18" class="monitor-d" :style="'height:'+containerHeight+'px'">
        <div>
          <power-statistics ref="powerStatic"></power-statistics>
          <electrical-parmas ref="elctricalParmas"></electrical-parmas>
        </div>
      </el-col>
      <el-col :span="6" class="monitor-d monitor-tree-d">
        <el-scrollbar :style="'height:100%;width: 100%'">
          <monitor-tree @nodeChange="treeNodeChange"></monitor-tree>
        </el-scrollbar>
      </el-col>
    </el-row>
  </section>
  </d2-container>
</template>
<script>
import PowerStatistics from './run/power_statistics';
import ElectricalParmas from './run/electrical_parmas';
import MonitorTree from './run/monitor_tree';
import * as Util from "@/utils";
export default {
  data() {
    return {
    }
  },
  components:{
      PowerStatistics,
      ElectricalParmas,
      MonitorTree
  },
  computed:{
    containerHeight() {
      return Util.getClientHeight() - 143;
    }
  },
  methods: {
    treeNodeChange(data){
      this.$refs.powerStatic.refreshData(data);
      this.$refs.elctricalParmas.refreshData(data);
    },

  },

  mounted() {}
}

</script>
<style scoped lang="scss">
  @import "../../assets/scss/_variables";
.vue-monitor {
  min-width: 900px;
}

.vue-monitor .el-row {
  width: 100%;
  display: flex;
  align-items: flex-start;
}
.vue-monitor .monitor-d{
  /*box-shadow: 0px 0px 1px 1px #f7f6f6;*/
}
.vue-monitor .monitor-tree-d {
    position: absolute;
    height: 100%;
    top: 0;
    right: 0;
}




/*清除浮动代码*/

.clearfloat:after {
  display: block;
  clear: both;
  content: "";
  visibility: hidden;
  height: 0
}

.clearfloat {
  zoom: 1
}


</style>
